<template>
    <a-table 
      :columns="columns" 
      :data-source="data" 
      :expandedRowKeys="expandedRowKeys"
      :expandIcon="customExpandIcon"
      @expand="onExpand"
      />
  </template>
  <script lang="ts" setup>
  import { ref,watch ,h } from 'vue';
  import {processInfo} from '@/store/modules/processInfo';
  import { CaretDownOutlined, CaretRightOutlined } from '@ant-design/icons-vue';
  import { Table } from 'ant-design-vue';


  const processInfoStore = processInfo();
  const data=ref<DataItem[]>();
  const expandedRowKeys = ref<any[]>([]);
  
  // 自定义展开图标
  const customExpandIcon = ({ expanded, expandable, onExpand, record }: any) => {
    // 如果行有子级数据，不显示任何图标
    if (record.children && record.children.length <= 0) {
      return null;
    }
    return expandable ? (
      h(expanded ? CaretDownOutlined : CaretRightOutlined, {
        onClick: (e: Event) => {
          e.stopPropagation(); // 防止事件冒泡
          onExpand(record, e);
        }
      })
    ) : null;
  };

  // 处理行展开/收起事件
  const onExpand = (expanded: boolean, record: DataItem) => {
    const currentIndex = expandedRowKeys.value.indexOf(record.key);
    if (currentIndex > -1) {
      expandedRowKeys.value.splice(currentIndex, 1);
    } else {
      expandedRowKeys.value.push(record.key);
    }
  };
  const columns = [
    {
      title: '参数编码',
      dataIndex: 'code',
      key: 'code',
    },
    {
      title: '参数类型',
      dataIndex: 'paramType',
      key: 'paramType',
      width: '12%',
      customRender: ({ record }) => {
        if(record.paramType=="0"){
            return "对象";
        }
        if(record.paramType=="1"){
            return "字符串";
        }
        if(record.paramType=="2"){
            return "数值";
        }
        if(record.paramType=="3"){
            return "布尔";
        }
      },
    },
    {
      title: '参数说明',
      dataIndex: 'name',
      width: '30%',
      key: 'name',
    },
  ];
  
  interface DataItem {
    key: number;
    code: string;
    paramType: string;
    name: string;
    children?: DataItem[]; // 子级数据结构与父级相同
  }

  const loadData=()=>{
    data.value=processInfoStore.procVariable[0]
    console.log(processInfoStore.procVariable[0],"tabledata111111");
    console.log(processInfoStore.procVariable[1],"tabledata1222222");
  }
  loadData();
  
  // 监听数据变化，重置展开状态
  watch(data, () => {
    expandedRowKeys.value = [];
  });

  </script>
  
  